<template>
	<view class="address-selector" @click="naviToSelectStore">
		<view class="store-name">
			<text>{{storeName}}</text>
			<uni-icons type="right" ></uni-icons>
		</view>
		<text class="distance">{{distanceLael}}</text>
	</view>
</template>

<script setup>
	import {ref,computed} from "vue"
	import {getCustomCoordinate,request} from '@/common/index.js'
	import {useUserStore} from '@/stores/user.js'
	import { storeToRefs } from 'pinia'
	import {onLoad} from "@dcloudio/uni-app"
	
	const emit = defineEmits(['storeSelected'])
	
	const storeId = ref(null)
	const storeName = ref("请选择门店")
	const distance = ref(10)
	const distanceLael = computed(() => {
		if(distance.value === null) return ""
		return `距您${distance.value}m`
	})
	const {userCurrentCoordinate} = storeToRefs(useUserStore())
	const {getCoordinate} = useUserStore()
	
	/**
	 * 获取门店信息
	 */
	async function getRecentedStoreBycoordinate(){
		// const resData = await request({
		// 	url:'/api/getRecentedStoreBycoordinate',
		// 	data:{
		// 		longitude:userCurrentCoordinate.longitude,
		// 		latitude:userCurrentCoordinate.latitude,
		// 	}
		// })
		// storeId.value = resData.id 
		// storeName.value = resData.name 
		// distance.value = resData.distance
		// emit('storeSelected',storeId.value)
		emit('storeSelected',22222)
	}
	
	
	function naviToSelectStore(){
		uni.navigateTo({
			url:'/pages/menu/AddressSelectorPage',
			animationType: 'pop-in',
			animationDuration: 300
		})
	}
	
	/**
	 * 页面生命周期触发
	 */
	onLoad(async () => {
		console.log("menu address selector load")
		await getCoordinate()
		getRecentedStoreBycoordinate()
	})
</script>

<style lang="less" scoped>
	.address-selector {
		height:100rpx;
		.store-name {
			display:flex;
			align-items: center;
			margin-bottom:10rpx;
			font-size:30rpx;
			.uni-icons {
				margin-left:10rpx;
				margin-top:3rpx; // 图标位置修正
			}
		}
		.distance {
			font-size:25rpx;
			color:gray;
		}
		
	}
	
</style>